iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 11
1
Modern Web

從0開始的網頁生活!30天從網頁新手到網頁入門系列 第 11

Day11-HTML元素邊界關係!margin、padding、border

  • 分享至 

  • xImage
  •  

本文已搬家到筆者自己的部落格嘍,有興趣的可以點這個連結

前言

大家在看任何跟邊界有關的 CSS 時不曉得有沒有看過這張圖,這張圖代表著 HTML 內的每個元素的邊界設定。

今天這篇文章可以說是筆者在初學網頁時最常遇到的問題,相信很多人在初學網頁的時候都會 marginpadding 傻傻分不清,兩者的作用都是負責調整邊界的間距,到底兩個差別在哪裡呢?以及 borderbox-sizing 之間又有什麼關係呢?筆者今天就用這篇文章帶大家深入了解 HTML 元素的邊界設定。

margin

margin 是負責調整 元素與元素 之間的邊界間距,屬於元素外部的邊界調整。

  • 屬性介紹

    • margin-top

      設定元素與元素之間的上邊界間距。

    • margin-right

      設定元素與元素之間的右邊界間距。

    • margin-bottom

      設定元素與元素之間的下邊界間距。

    • margin-left

      設定元素與元素之間的左邊界間距。

    Imgur

    也可以將上述的屬性合併寫成 margin 即可,但要注意方向性, margin 寫法可以參考下圖
    Imgur

padding

padding 是負責調整 元素內所有內容與元素自身 的邊界間距,屬於元素內部的邊界調整。

  • 屬性介紹

    • padding-top

      設定元素內容與元素自身上邊界的間距。

    • padding-right

      設定元素內容與元素自身右邊界的間距。

    • padding-bottom

      設定元素內容與元素自身下邊界的間距。

    • padding-left

      設定元素內容與元素自身左邊界的間距。

    Imgur

    也可以將上述的屬性合併寫成 padding 即可,但要注意方向性, padding 寫法可以參考下圖
    Imgur

border

border 是元素最外層的邊界,常見的元素外框設定就是此設定。

  • 邊界樣式介紹

    • border-width

      設定邊框寬度大小。

    • border-style

      設定邊框樣式,常見的有 實線(solid)虛線(dashed)

    • border-color

      設定邊框顏色。

  • 屬性介紹

    底下屬性後方所接的值為上面提到的樣式,順序為 border-widthborder-colorborder-style ,中間用空格隔開。

    • border-top

      設定元素自身的上邊框。

    • border-right

      設定元素自身的右邊框。

    • border-bottom

      設定元素自身的下邊框。

    • border-left

      設定元素自身的左邊框。

    也可以將上述的屬性合併寫成 border 即可,代表四個方向的邊框都會套用一樣的樣式,寫法如下
    Imgur

box-sizing

box-sizing 的出現是用來調整區塊的內距與邊框計算方式,與 border 以及 padding 的設定有關,常見的狀況就是元素內的內容設定了 border 以及 padding 導致外框超出原本元素的外框,影響了網頁的美觀程度。

  • 參數介紹

    • content-box

      設定的寬度僅為內容寬度, paddingborder 寬度會再額外加上去,所以內容仍然會超出元素自身的外框。

    • border-box

      設定的寬度就已經包含內容寬度、 paddingborder 寬度,所以內容不會超出元素自身的外框。

    Imgur

    Imgur

    Imgur

總結

今天提到了非常重要的邊界關係,假如今天要調整的是 元素與元素 之間不要靠得太近,就可以用 margin ,如果是要調整 元素內的內容與元素自身 不要靠得太近,就可以用 padding ,最後就用一個簡單的範例讓大家更了解 margin 以及 padding 的相關操作應用吧!


上一篇
Day10-html tag元素預設排版樣式
下一篇
Day12-響應式網頁設計!RWD
系列文
從0開始的網頁生活!30天從網頁新手到網頁入門30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 則留言

0
AndrewYEE
iT邦新手 3 級 ‧ 2023-02-04 09:07:15

很清楚! 謝謝!

我要留言

立即登入留言